<div class="content-margin edit-replication-task edit-ongoing-task">
    <form class="flex-form" data-bind="submit: saveExternalReplication">
        <div class="align-items-center justify-content-between d-flex gap-2 margin-bottom-md padding-top-xs">
            <div class="flex-horizontal gap-2">
                <i class="icon-pull-replication-agent"></i>
                <h2 data-bind="text: $root.isAddingNewReplicationTask() ? `New External Replication` : `Edit External Replication`" class="mb-0"></h2>
                <span class="badge license-restricted-badge professional" data-bind="if: !$root.hasExternalReplication">Professional +</span>
            </div>
            <div class="flex-end margin-right-xs" data-bind="react: $root.infoHubView"></div>
        </div>
        <div class="row flex-row">
            <div class="col-xs-12 col-lg-6 flex-vertical">
                <div class="flex-header">
                    <span data-placement="right" data-toggle="tooltip" data-html="true" data-animation="true"
                        data-bind="tooltipText: $root.hasExternalReplication ? null : `<div class='padding'>Your current license does not support this feature.<br /><a href='https://ravendb.net/l/FLDLO4' target='_blank'>Upgrade your plan</a> to access.</div>`">
                        <button type="submit" class="btn btn-primary" data-bind="disable: $root.spinners.save() || !$root.dirtyFlag().isDirty(), css: { 'btn-spinner': $root.spinners.save }">
                            <i class="icon-save"></i><span>Save</span>
                        </button>
                    </span>
                    <button data-bind="click: cancelOperation" class="btn btn-default" title="Return to Ongoing Tasks View">
                        <i class="icon-cancel"></i><span>Cancel</span>
                    </button>
                </div>
                <div class="panel" data-bind="css: { 'pe-none item-disabled': !$root.hasExternalReplication }">
                    <div class="panel-body" data-bind="with: editedExternalReplication">
                        <div class="form-group margin-top" data-bind="validationElement: taskName">
                            <label for="taskName" class="control-label">Task Name</label>
                            <div class="flex-grow">
                                <input type="text" class="form-control" data-bind="textInput: taskName" id="taskName" autocomplete="off" placeholder="Enter a descriptive name for the replication task (optional)">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Task State</label>
                            <div class="flex-grow">
                                <button type="button" class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown" aria-expanded="false">
                                    <span data-bind="text: stateText()"></span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#" data-bind="click: _.partial($root.setState, 'Enabled')"><span>Enabled</span></a></li>
                                    <li><a href="#" data-bind="click: _.partial($root.setState, 'Disabled')"><span>Disabled</span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">&nbsp;</label>
                            <div class="toggle" data-placement="right" data-toggle="tooltip" title="Toggle on to set a delay time for the task" data-animation="true">
                                <input id="setDelayTime" type="checkbox" data-bind="checked: showDelayReplication">
                                <label for="setDelayTime">Set Replication Delay Time</label>
                            </div>
                        </div>
                        <div data-bind="validationElement: delayReplicationTime, collapse: showDelayReplication">
                            <div class="form-group">
                                <div>
                                    <label class="control-label">Delay Time</label>
                                </div>
                                <div class="flex-grow" data-bind="validationElement: delayReplicationTime">
                                    <input type="text" class="form-control" data-bind="durationPicker: delayReplicationTime, durationPickerOptions: { showDays: true, showSeconds: true }" />
                                    <div class="help-block" data-bind="validationMessage: delayReplicationTime"></div>
                                </div>
                            </div>
                        </div>
                        <div data-bind="collapse: humaneDelayDescription">
                            <div class="form-group margin-bottom">
                                <label class="control-label">&nbsp;</label>
                                <div class="bg-info padding padding-sm small flex-horizontal">
                                    <div><i class="icon-info"></i></div>
                                    <div data-bind="html: humaneDelayDescription"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">&nbsp;</label>
                            <div class="toggle" data-placement="right" data-toggle="tooltip" data-bind="attr: { title: $root.db.isSharded() ? 'Not supported in sharded databases' : 'Toggle on to set a responsible node for the task'  }"
                                 data-animation="true">
                                <input id="responsibleNode" type="checkbox" data-bind="checked: manualChooseMentor, disable: $root.possibleMentors().length === 0 || $root.db.isSharded()">
                                <label for="responsibleNode">Set responsible node</label>
                            </div>
                        </div>
                        <div data-bind="compose: $root.taskResponsibleNodeSectionView"></div>
                        <div class="form-group">
                            <label class="control-label">&nbsp;</label>
                            <div class="toggle">
                                <input id="createNewString" type="checkbox" data-bind="checked: $root.createNewConnectionString">
                                <label for="createNewString">Create a new RavenDB connection string</label>
                            </div>
                        </div>
                        <div data-bind="collapse: $root.createNewConnectionString, with: $root.newConnectionString"> 
                            <div class="form-group">
                                <div class="flex-grow" data-bind="compose: $root.connectionStringView"></div>
                            </div>
                        </div>
                        <div class="form-group" data-bind="validationOptions: { insertMessages: false }, validationElement: connectionStringName, visible: !$root.createNewConnectionString()">
                            <label class="control-label">Connection String</label>
                            <div class="flex-grow">
                                <button class="btn btn-block dropdown-toggle text-left" type="button" data-toggle="dropdown"
                                        data-bind="textInput: connectionStringName, disable: $root.ravenEtlConnectionStringsDetails().length === 0,
                                                   attr: { 'title': $root.ravenEtlConnectionStringsDetails().length === 0 ? 'No connection strings were defined' : 'Select a connection string' }">
                                    <span data-bind="text: connectionStringName() || 'Select a connection string'"></span>
                                    <span class="caret dropdown-toggle" data-toggle="dropdown"></span>
                                </button>
                                <ul class="dropdown-menu"
                                    data-bind="foreach: $root.ravenEtlConnectionStringsDetails">
                                    <li data-bind="click: _.partial($root.useConnectionString, $data.Name)">
                                        <a href="#">
                                            <div class="row">
                                                <strong class="col-xs-7" data-bind="text: $data.Name"></strong>
                                                <small class="col-xs-2">Destination DB:</small>
                                                <small class="col-xs-3" data-bind="text: $data.Database"></small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <span class="help-block" data-bind="validationMessage: connectionStringName"></span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div data-bind="if: createNewConnectionString">
                            <div class="panel-addon" data-bind="with: testConnectionResult">
                                <div class="padding bg-success small" data-bind="visible: Success">
                                    <div>Successfully connected to node</div>
                                </div>
                                <div data-bind="if: !Success">
                                    <div class="padding bg-danger small">
                                        <h2>Connection test failed!</h2>
                                        <span data-bind="text: $root.fullErrorDetailsVisible() ? Error : $root.shortErrorText()"></span>
                                        <div>
                                            <a href="#" data-bind="click: $root.fullErrorDetailsVisible.toggle.bind($root.fullErrorDetailsVisible), text: $root.fullErrorDetailsVisible() ? 'hide details' : 'show details'"></a>
                                        </div>
                                    </div>
                                    <div class="padding bg-info small">
                                        <h2>About this error</h2>
                                        <div>Each RavenDB server has both HTTP and TCP endpoints. While the first one is used for system management and client-server rest request, the second is used for inter-server and advanced client-server communications.</div>
                                        <div>The connection tests the TCP endpoint only after a successful HTTP connection.</div>
                                        <div data-bind="visible: HTTPSuccess">It appears that the current server was able to connect to the desired server through HTTP, but failed connecting to it using TCP.</div>
                                        <div data-bind="visible: !HTTPSuccess">It appears that the current server could not connect to the desired node through HTTP.</div>
                                        <div>
                                            Please verify that:
                                            <ul>
                                                <li>The URL is correct</li>
                                                <li>Both RavenDB and the target machine are up and running</li>
                                                <li>There are no firewall settings on either machine blocking usage of that URL</li>
                                                <li>There are no network configurations that prevent communication</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-addon">
                            <div class="padding text-warning bg-warning small" data-bind="visible: ravenEtlConnectionStringsDetails().length === 0 && !createNewConnectionString()">
                                <i class="icon-warning"></i>&nbsp;&nbsp;No connection strings have been defined yet
                            </div>
                            <div data-bind="visible: usingHttps">
                                <div data-bind="compose: $root.certificateUploadInfoForOngoingTasks"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
